<template>
	<view class="container">
		<view class="bg_title bg_title_fixed">
			<view class="back" @click="back()">
				<text class="iconfont icon-zuojiantou"></text>
			</view>
			<view class="title">
				{{produce_info.name}}
			</view>
		</view>
		<view class="swiper-view">
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :circular="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in produce_info.product_title_img">
					<view class="swiper-item">
						<image :src="item" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="product-detail">
			<view class="product-detail-price">
				<view class="product-detail-price-prices">
					￥{{produce_info.product_min_price == produce_info.product_max_price?
						produce_info.product_min_price
						:produce_info.product_min_price + '-' + produce_info.product_max_price}}
				</view>
				<view class="product-detail-price-coupon">
					领券<text class="iconfont icon-youjiantou"></text>
				</view>
			</view>
			<view class="product-detail-name">
				{{produce_info.name}}
			</view>
			<view class="product-detail-lable">
				<view class="product-detail-sale">
					<text class="iconfont icon-flag">销量:{{produce_info.product_sale}}</text>
				</view>
				<view class="product-detail-sale">
					<text class="iconfont icon-dynamic">库存:{{stockCount/product_option.length || 1}}</text>
				</view>
				<view class="product-detail-sale">
					<text class="iconfont icon-share">分享</text>
				</view>
			</view>
		</view>
		<view class="product-option">
			<view class="product-option-option" @click="tab_btn_buyBtn=1" v-if="select_tabs_option.length == 0">
				<view class="product-option-title">
					选择
				</view>
				<view class="product-option-option-title">
					<view class="product-option-option-name">
						尺码{{product_option.length>1?'等':''}}{{product_option.length}}种分类可选
					</view>
					<view class="product-option-option-icon">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
			</view>
			<view class="product-option-option" @click="tab_btn_buyBtn=1" v-else>
				<view class="product-option-title">
					已选择
				</view>
				<view class="product-option-option-title">
					<view class="product-option-option-name" v-if="select_tabs_option.length == 1">
						{{product_option[0].name}}:{{product_option[0].list[select_tabs_option[0].split(',')[1]].list_name}}
					</view>
					<view class="product-option-option-name" v-if="select_tabs_option.length == 2">
						{{product_option[0].name}}:{{product_option[0].list[select_tabs_option[0].split(',')[1]].list_name}},
						{{product_option[1].name}}:{{product_option[1].list[select_tabs_option[1].split(',')[1]].list_name}}
					</view>
					<view class="product-option-option-icon">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="product-comment">
			<view class="product-comment-title">
				<view class="product-comment-title-count">
					宝贝评价({{commentCount}})
				</view>
				<view class="product-comment-title-all">
					<text>查看全部</text>
					<text class="iconfont icon-youjiantou"></text>
				</view>
			</view>
			<view class="product-comment-list">
				<view class="product-comment-list-list" v-for="(item,index) in commentList">
					<view class="product-comment-list-title">
						<view class="product-comment-list-image">
							<image :src="item.comment_user_headimg" mode="scaleToFill"></image>
						</view>
						<view class="product-comment-list-time">
							<view class="product-comment-list-time-name">
								{{return_name(item.comment_user_name)}}
							</view>
							<view class="product-comment-list-time-time">
								{{return_time(item.comment_time)}}
							</view>
						</view>
					</view>
					<view class="product-comment-list-detail">
						{{item.comment_content}}
					</view>
				</view>
			</view>
		</view>
		<view class="rich-text-title">
			宝贝详情
		</view>
		<rich-text :nodes="produce_info.product_text_img"></rich-text>
		<view class="tab_btn">
			<view class="tab_btn_navTabs">
				<view class="tab_btn_navTabs_icons">
					<text class="iconfont" :class="collection?'icon-select_fill':'icon-select'" @click="change_coll"></text>
				</view>
			</view>
			<view class="tab_btn_buyBtn">
				<button class="tab_btn_buyBtn_car" @click="tab_btn_buyBtn=1">加入购物车</button>
				<button class="tab_btn_buyBtn_buy" @click="tab_btn_buyBtn=2">立即购买</button>
			</view>
		</view>
		<!-- 购物车，立即购买面板 -->
		<view :class="tab_btn_buyBtn == 0?'tabs_bar':'tabs_bar_active'">
			<view class="tabs_bar_bgColor" @click="tab_btn_buyBtn=0"></view>
			<view class="tabs_bar_tabBars">
				<view class="tabs_bar_tabBars_title">
					<view class="tabs_bar_tabBars_title_image">
						<image :src="select_image || '../../static/app/applogo.png'" mode="scaleToFill"></image>
					</view>
					<view class="tabs_bar_tabBars_title_price" v-if="select_price == 0">
						￥{{produce_info.product_min_price == produce_info.product_max_price?
						produce_info.product_min_price 
						:produce_info.product_min_price + '-' + produce_info.product_max_price}}
					</view>
					<view class="tabs_bar_tabBars_title_price" v-else>
						￥{{select_price}}
					</view>
					<view class="tabs_bar_tabBars_title_close" @click="tab_btn_buyBtn=0">
						<text class="iconfont icon-close"></text>
					</view>
				</view>
				<scroll-view scroll-y="true">
					<view class="tabs_bar_tabBars_list">
						<view v-for="(item,indx) in product_option">
							<view class="tabs_bar_tabBars_list_title">
								{{item.name}}
							</view>
							<view :class="JSON.stringify(select_tabs_option).indexOf(indx+','+index) == -1?'tabs_bar_tabBars_list_list':'tabs_bar_tabBars_list_list_active'" 
								v-for="(items,index) in item.list"
								@click="addOption(indx,index)">
								<view class="tabs_bar_tabBars_list_image">
									<image :src="items.list_img" mode="scaleToFill"></image>
								</view>
								<view class="tabs_bar_tabBars_list_text">
									{{items.list_name}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="tabs_bar_tabBars_number">
					<view class="tabs_bar_tabBars_number_title">
						购买数量
					</view>
					<view class="tabs_bar_tabBars_number_stock">
						库存{{select_stock}}件
					</view>
					<view class="tabs_bar_tabBars_number_change">
						<button type="default" @click="delete_select_number">
							<text class="iconfont icon-jian1"></text>
						</button>
						<input type="text" v-model="select_number" />
						<button type="default" @click="add_select_number">
							<text class="iconfont icon-add"></text>
						</button>
					</view>
				</view>
				<view class="tabs_bar_tabBars_confirm">
					<button type="default" @click="btn_buyBtn()">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/comon/api.js'
	export default {
		data() {
			return {
				product_id: 0,
				produce_info: {
					name: '--',
					product_price: 0,
					product_min_price: 0,
					product_max_price: 0,
					product_sale: 0,
					product_text_img: '--'
				},
				product_additional:{},
				product_option: [],
				tab_btn_buyBtn: 0,
				select_tabs_option:[],
				select_number:1,
				select_price: 0,
				commentList:[],
				commentCount: 0,
				commentPage:{
					pageNum: 0,
					pageSize: 2,
					product_id: 0,
					comment_type: 0
				},
				stockCount: 0,
				select_stock: 0,
				collection:false,
				select_image:""
			}
		},
		onLoad(option) {
			this.product_id = option._id;
			this.commentPage.product_id = option._id;
			this.loadDate();
			this.loadComment();
			this.loadCollection();
		},
		methods: {
			async loadDate() {
				let res = await api.uniCloudApi(api.publicFun.product, {
					_id: this.product_id,
					product_type: 1
				});
				if (res) {
					res[0].produce_info.product_text_img = res[0].produce_info.product_text_img.replace(/class='wscnph'/g,
						"style='width:100%'")
					this.produce_info = res[0].produce_info;
					this.product_option = res[0].product_option;
					for(let i in this.product_option){
						for(let j in this.product_option[i].list){
							this.stockCount += parseInt(this.product_option[i].list[j].list_stock);
						}
					}
					this.product_additional = res[0].product_additional;
					this.select_stock = this.stockCount
				}
			},
			async loadComment(){
				let res = await api.uniCloudApi(api.publicFun.comment,this.commentPage);
				this.commentList = this.commentList.concat(res.comment_list.data);
				this.commentCount = res.comment_count.total;
			},
			async loadCollection(){
				const userinfo = uni.getStorageSync('userInfos');
				let res = await api.uniCloudApi(api.publicFun.collection,{
					user_id: userinfo._id,
					product_id: this.product_id,
					coll_type: 0
				})
				this.collection = res;
			},
			async change_coll(){
				this.collection = !this.collection;
				const userinfo = uni.getStorageSync('userInfos');
				if(!userinfo){
					uni.showModal({
						title:'您还未登录，请先登录',
						confirmText:'去登录',
						success(e) {
							if(e.confirm){
								uni.navigateTo({
									url:'../public/login'
								})
							}
						}
					})
					return
				}
				let res = await api.uniCloudApi(api.publicFun.collection,{
					user_id: userinfo._id,
					product_id: this.product_id,
					collection_type:0,
					coll_type: 1
				})
				if(res.id){
					this.collection = true;
					this._show_toast('已收藏');
				}
				if(res.deleted == 1){
					this.collection = false;
					this._show_toast('取消收藏');
				}
			},
			//点击弹出面板筛选
			btn_buyBtn(){
				let userinfo = uni.getStorageSync('userInfos');
				if(!userinfo){
					uni.showModal({
						title:'您还未登录，请先登录',
						confirmText:'去登录',
						success(e) {
							if(e.confirm){
								uni.navigateTo({
									url:'../public/login'
								})
							}
						}
					})
					return
				}
				if(this.select_tabs_option.length != this.product_option.length){
					uni.showToast({
						icon:'none',
						title:'此商品需要每个规格至少选一个哦',
						duration:3000
					})
					return
				}
				//加入购物车时间
				let create_cart = new Date().getTime();
				let params={};
				params.create_cart = create_cart;
				params.product_additional={
					admin_id: this.product_additional.product_upload_id,
					admin_name:this.product_additional.name
				};
				params.product_id = this.product_id;
				params.product_name = this.produce_info.name;
				params.product_number = this.select_number;
				params.product_price = this.select_price
				params.user_id = userinfo._id;
				params.product_title_image = this.select_image;
				params.product_option = {};
				if(this.select_tabs_option.length == 1){
					params.product_option.list0_name = `${this.product_option[0].name}:${this.product_option[0].list[this.select_tabs_option[0].split(',')[1]].list_name}`
				}else {
					params.product_option.list0_name = `${this.product_option[0].name}:${this.product_option[0].list[this.select_tabs_option[0].split(',')[1]].list_name}`
					params.product_option.list1_name = `${this.product_option[1].name}:${this.product_option[1].list[this.select_tabs_option[1].split(',')[1]].list_name}`
				}
				if(this.tab_btn_buyBtn == 1){
					this.add_cart(params);
				}else{
					this.tab_btn_buyBtn = 0;
					this.create_order(params)
				}
			},
			//加入购物车
			async add_cart(params){
				params.cart_type = 0;
				let res = await api.uniCloudApi(api.publicFun.cart,params);
				if(res.status == 200 || res.updated == 1){
					uni.showToast({
						icon:'none',
						title:'添加购物车成功'
					})
				}
			},
			// 预览订单（为创建订单）
			create_order(params){
				delete params.create_cart
				uni.setStorage({
					key:'order_detail',
					data:JSON.stringify(params),
					success() {
						uni.navigateTo({
							url:'../order/create_order'
						})
					}
				})
			},
			// 选择类别时变化
			addOption(toIndex,index){
				for(let i in this.select_tabs_option){
					if(this.select_tabs_option[i].split(',')[0] == toIndex){
						this.select_tabs_option.splice(i,1);
					}
				}
				if(toIndex == 0){
					this.select_tabs_option.unshift(toIndex + ',' + index)
				}else {
					this.select_tabs_option.push(toIndex + ',' + index);
				}
				if(this.product_option.length > 1){
					this.select_price = this.product_option[toIndex].list[index].list_price;
					if(this.select_tabs_option.length > 1){
						let o =  this.product_option[this.select_tabs_option[0].split(',')[0]].list[this.select_tabs_option[0].split(',')[1]].list_price;
						let t =  this.product_option[this.select_tabs_option[1].split(',')[0]].list[this.select_tabs_option[1].split(',')[1]].list_price;
						if(o >= t){
							this.select_price = t;
						}else{
							this.select_price = o;
						}
						let os = this.product_option[this.select_tabs_option[0].split(',')[0]].list[this.select_tabs_option[0].split(',')[1]].list_stock;
						let tt =  this.product_option[this.select_tabs_option[1].split(',')[0]].list[this.select_tabs_option[1].split(',')[1]].list_stock;
						if(os >= tt){
							this.select_stock = tt;
						}else{
							this.select_stock = os;
						}
					}
				}else {
					this.select_price = this.product_option[toIndex].list[index].list_price;
					this.select_stock = this.product_option[toIndex].list[index].list_stock;
				}
				this.select_image = this.product_option[toIndex].list[index].list_img;
			},
			add_select_number(){
				this.select_number += 1;
			},
			delete_select_number(){
				if(this.select_number == 1){
					return
				}else {
					this.select_number -= 1
				}
			},
			return_time(time){
				let nowsTemp = new Date().getTime();
				// 秒
				let miao  = Math.floor((nowsTemp - time)/1000);
				if(miao == 0){
					return '刚刚';
				}else if(miao>0 && miao < 60){
					return miao + '秒前';
				}
				//分
				let fen = Math.floor(miao/60);
				if(fen > 0 && fen < 60){
					return fen + '分钟前';
				}
				//小时
				let hour = Math.floor(fen / 60);
				if(hour > 0 && hour < 24){
					return hour + '小时前';
				}
				//天
				let days = Math.floor(hour / 24);
				return days + '天前';
			},
			return_name(name){
				name = name.substring(0,3);
				return name.substr(0, 1) + "***" + name.substr(1 + 1);
			},
			_show_toast(title){
				uni.showToast({
					icon:'none',
					title:title
				})
			},
			back() {
				uni.navigateBack({})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
	.bg_title{
		width: 100%;
		background-color: rgba(0,0,0,0);
	}
	.bg_title_fixed{
		position: fixed;
		/* #ifdef H5 */
		top: 0;
		/* #endif */
		/* #ifdef APP-PLUS */
		top: 44px;
		/* #endif */
		z-index: 1;
	}
	.swiper-view {
		width: 100%;

		.swiper {
			width: 100%;
			height: 750rpx;

			image {
				width: 100%;
			}
		}
	}

	.product-detail {
		width: 88%;
		padding: 2% 3%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		margin-left: 3%;
		border-radius: 15rpx;

		.product-detail-price {
			width: 100%;
			display: flex;
			height: 60rpx;

			.product-detail-price-prices {
				width: 50%;
				color: $uni-back-color;
				line-height: 60rpx;
				font-weight: bold;
				font-size: 35rpx;
			}

			.product-detail-price-coupon {
				width: 50%;
				height: 60rpx;
				line-height: 60rpx;
				text-align: right;
				position: relative;
				line-height: 60rpx;
				color: $uni-back-color;
				font-size: 20rpx;

				.icon-youjiantou {
					font-size: 20rpx;
				}
			}
		}

		.product-detail-name {
			line-height: 40rpx;
			font-size: 30rpx;
			font-weight: bold;
		}

		.product-detail-lable {
			width: 100%;
			display: flex;
			margin-top: 20rpx;

			view {
				width: 33.3%;
				text-align: center;
			}

			.product-detail-sale {
				color: #999999;

				text {
					font-size: 28rpx;
				}
			}
		}
	}

	.product-option {
		width: 88%;
		padding: 2% 3%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		margin-left: 3%;
		border-radius: 15rpx;
		margin-bottom: 25rpx;

		.product-option-option {
			width: 100%;
			display: flex;

			.product-option-title {
				width: 15%;
				height: 55rpx;
				line-height: 55rpx;
				color: #7d7d7d;
			}

			.product-option-option-title {
				width: 85%;
				display: flex;

				.product-option-option-name {
					width: 90%;
					height: 55rpx;
					line-height: 55rpx;
				}

				.product-option-option-icon {
					width: 10%;
					text-align: right;
					height: 55rpx;
					line-height: 55rpx;

					.icon-youjiantou {
						font-size: 22rpx;
						color: #878787;
					}
				}
			}
		}
	}

	.product-comment{
		width: 88%;
		padding: 2% 3%;
		margin-left: 2%;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		border-radius: 15rpx;
		.product-comment-title{
			width: 100%;
			display: flex;
			height: 60rpx;
			.product-comment-title-count{
				width: 50%;
				line-height: 60rpx;
				font-size: 30rpx;
				font-weight: bold;
			}
			.product-comment-title-all{
				width: 50%;
				text-align: right;
				line-height: 60rpx;
				text{
					font-size: 20rpx;
					color: $uni-back-color;
					margin-left: 7rpx;
				}
			}
		}
		.product-comment-list{
			width: 100%;
			.product-comment-list-list{
				margin-top: 20rpx;
				margin-bottom: 30rpx;
				width: 100%;
				.product-comment-list-title{
					width: 100%;
					display: flex;
					.product-comment-list-image{
						width: 80rpx;
						height: 80rpx;
						image{
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.product-comment-list-time{
						width: 200rpx;
						max-height:80rpx;
						line-height: 40rpx;
						margin-left: 25rpx;
						.product-comment-list-time-name{
							width: 100%;
							height: 40rpx;
							line-height: 40rpx;
						}
						.product-comment-list-time-time{
							width: 100%;
							height: 40rpx;
							line-height: 40rpx;
							font-size: 24rpx;
							color: #888888;
						}
					}
				}
				.product-comment-list-detail{
					line-height: 30rpx;
					margin:15rpx 0 ;
				}
			}
		}
	}

	.rich-text-title {
		width: 100%;
		text-align: center;
		margin-bottom: 25rpx;
	}

	.tab_btn {
		position: fixed;
		bottom: -2px;
		width: 100%;
		height: 50px;
		line-height: 50px;
		background-color: #FFFFFF;
		display: flex;

		.tab_btn_navTabs {
			width: 40%;
			display: flex;
			justify-content: flex-end;
			.tab_btn_navTabs_icons{
				width: 20%;
				height: 50px;
				line-height: 50px;
				.iconfont{
					font-size: 45rpx;
					color: $uni-back-color;
				}
			}
		}

		.tab_btn_buyBtn {
			width: 60%;
			display: flex;

			button {
				width: 46%;
				height: 34px;
				line-height: 34px;
				margin-top: 8px;
				margin-left: 0;
				margin-right: 0;
				border: 0;
				border-radius: 0;
				color: #FFFFFF;
				font-size: 28rpx;
				padding: 0;

				&::after {
					border-radius: 0;
					border: 0;
					padding: 0;
				}
			}

			.tab_btn_buyBtn_car {
				border-radius: 20px 0 0 20px;
				background-image: linear-gradient(to right, #ffcd19, #ff9e27);
				margin-left: 4%;
			}

			.tab_btn_buyBtn_buy {
				border-radius: 0 20px 20px 0;
				background-image: linear-gradient(to right, #f39625, #ff831d);
			}
		}
	}

	.tabs_bar,
	.tabs_bar_active{
		width: 100vw;
		position: fixed;
		top: 100vh;
		z-index: 999;
		transition-duration: 0.2s;
		/*     以下三值为默认值，稍后会详细介绍 */
		transition-property: all;
		transition-timing-function: ease;
		transition-delay: 0s;

		.tabs_bar_bgColor {
			width: 100%;
			height: 25vh;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.tabs_bar_tabBars {
			width: 100%;
			height: 75vh;
			background-color: #FFFFFF;

			.tabs_bar_tabBars_title {
				width: 96%;
				margin-left: 2%;
				padding: 1% 0;
				display: flex;

				.tabs_bar_tabBars_title_image {
					width: 150rpx;
					height: 150rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.tabs_bar_tabBars_title_price {
					width: calc((100% - 150rpx) * 0.7);
					margin-left: calc((100% - 150rpx) * 0.05);
					color: $uni-back-color;
					margin-top: 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}

				.tabs_bar_tabBars_title_close {
					width: calc((100% - 150rpx) * 0.20);
					text-align: right;
					margin-top: 10rpx;

					.icon-close {
						border: 1px solid #4b4b4b;
						color: #4b4b4b;
						border-radius: 50%;
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}

			scroll-view {
				width: 100%;
				height: 45vh;
				border-top: 1px solid #F1F1F1;
				margin-top: 20rpx;
				.tabs_bar_tabBars_list {
					width: 96%;
					margin-left: 2%;
					.tabs_bar_tabBars_list_title {
						font-size: 29rpx;
						height: 60rpx;
						line-height: 60rpx;
						font-weight: bold;
						font-family: '仿宋';
					}

					.tabs_bar_tabBars_list_list, 
					.tabs_bar_tabBars_list_list_active{
						display: flex;
						padding: 5rpx 2%;
						background-color: rgba(0, 0, 0, 0.04);
						margin-bottom: 15rpx;
						border-radius: 15rpx;
						max-width: 350rpx;

						.tabs_bar_tabBars_list_image {
							width: 50rpx;
							height: 50rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 7rpx;
							}
						}

						.tabs_bar_tabBars_list_text {
							margin-left: 20rpx;
							height: 40rpx;
							line-height: 40rpx;
							font-size: 24rpx;
							margin-top: 5rpx;
						}
					}
					.tabs_bar_tabBars_list_list_active{
						background-color:  rgba(0, 0, 0, 0.2);
					}
				}
			}
			
			.tabs_bar_tabBars_number{
				display: flex;
				width: 96%;
				margin-left: 2%;
				border-top: 1px solid #F1F1F1;
				margin-top: 20rpx;
				padding-top: 20rpx;
				height: 60rpx;
				.tabs_bar_tabBars_number_title{
					width: 20%;
					font-size: 31rpx;
					height: 60rpx;
					line-height: 60rpx;
				}
				.tabs_bar_tabBars_number_stock{
					width: 35%;
					text-align: left;
					height: 60rpx;
					line-height: 60rpx;
					color: #999999;
					font-size: 20rpx;
				}
				.tabs_bar_tabBars_number_change{
					display: flex;
					width: 45%;
					justify-content: flex-end;
					button,
					input{
						width: 60rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						padding: 0;
						margin: 0;
						background-color: #F1F1F1;
						border: 0;
						border-radius: 0;
						&::after{
							border: 0;
							border-radius: 0;
						}
						.icon-jian1{
							color: #999999;
						}
					}
					input{
						background-color: #f5f5f5;
					}
				}
			}
			
			.tabs_bar_tabBars_confirm{
				width: 96%;
				margin-left: 2%;
				height: calc(30vh - 300rpx);
				line-height: calc(30vh - 300rpx);
				button{
					width: 70%;
					height: 60rpx;
					line-height: 60rpx;
					margin-top: 20rpx;
					border-radius: calc((30vh - 330rpx)/2);
					border: 0;
					font-size: 31rpx;
					color: #F1F1F1;
					background-color: #f75600;
					&::after{
						border: 0;
					}
					&:active{
						background-color: #d94c00;
						color: #000000;
					}
				}
			}
		}
	}
	.tabs_bar_active{
		top: 0;
	}
</style>
